<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .mat-card {
    transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1);
    display: block;
    position: relative;
    padding: 24px;
    border-radius: 2px;
    color: rgba(0,0,0,.87);
  }

  .box-shadow {
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
  }

  #login {
    height: 55vh;
    background-color: #3f51b5;
  }

  .box-card-body {
    width: 40vw;
    min-width: 27vw;
    max-width: 80vw;
    margin: 0 auto;
    bottom: -1vh;
    position: relative;
    top: 18vh;
  }
  .mat-card-avatar {
    height: 40px;
    width: 40px;
    border-radius: 50%;
  }
  .mat-card-header-text {
    margin: 0 8px;
  }
  .mat-card-title {}
  .mat-card-subtitle {
    color: rgba(0,0,0,.54);
  }
  .submit-btn {
    color: #fff;
    margin: 10px auto 0 auto;
    display: block;
    width: 100%;
    transform: translate3d(0,0,0);
    transition: background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1);
  }
</style>
<template>
  <div id="login" class="mat-card box-shadow">
    <el-card class="box-card-body box-shadow mat-card">
      <div class="clear">
        <div class="mat-card-avatar pull-left">
          <i class="icon-guanwangicon31334 icon iconfont col-ff4 text-size-36"></i>
        </div>
        <div class="mat-card-header-text pull-left">
          <div class="mat-card-title text-size-14 m-b-15 show font-w-700">你好！</div>
          <div class="mat-card-subtitle m-t--10 show m-b-15 text-size-14">请登录……</div>
        </div>
      </div>
      <div>
        <el-form label-width="80px" status-icon :model="userInfo" status-icon :rules="rules2" ref="userInfo" class="demo-ruleForm">
          <el-form-item label="账号" prop="account">
            <el-input v-model="userInfo.account"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="userInfo.password" type="password"></el-input>
          </el-form-item>
          <el-form-item label="邮箱地址" prop="email">
            <el-input v-model="userInfo.email" type="email"></el-input>
          </el-form-item>
          <el-form-item label="仓库地址" prop="url">
            <el-input v-model="userInfo.url"></el-input>
          </el-form-item>
          <el-form-item size="large">
            <el-button @click="onSubmit('userInfo')" class="bg-ff4 submit-btn box-shadow" plain>登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
  import userModel from '../assets/js/models/user.model'

  export default {
    name: 'login',
    data () {
      var checkAccount = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('账号不能为空'));
        }
        callback();
      };
      var checkPassword = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          callback();
        }
      };
      var checkEmail = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入邮箱'));
        }  else {
          callback();
        }
      };
      var checkUrl = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入仓库地址'));
        } else {
          callback();
        }
      };
      return {
        userInfo: {
          account: '',
          password: '',
          email: '',
          url: ''
        },
        rules2: {
          password: [
            { validator: checkPassword, trigger: 'blur' }
          ],
          account: [
            { validator: checkAccount, trigger: 'blur' }
          ],
          email: [
            { validator: checkEmail, trigger: 'blur' }
          ],
          url: [
            { validator: checkUrl, trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      onSubmit (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const userInfo = this.userInfo
            console.log(userModel(userInfo));
            localStorage.setItem('userModel',JSON.stringify(userModel(userInfo)));
            this.$router.push('/');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    },
    watch: {},
    created () {
    }
  }
</script>
